<template>
  <page-container>
    <a-spin :spinning="spinning" tip="正在加载...">
      <a-card size="small" :title="securityName">
        <template #extra>
          <div v-if="concernStatus == '0'">
            <heart-outlined @click="attentionClick" />
            关注
          </div>
          <div v-else>
            <heart-filled @click="attentionClick" style="color: red" />
            已关注
          </div>
        </template>
        <a-row :gutter="20">
          <a-col>乱点编号：{{ securityNo }}</a-col>
          <a-col>涉警量：{{ securityCaseNum }}</a-col>
        </a-row>
      </a-card>
      <supper-select
        style="margin-top: 20px"
        @change="supperSelectChange"
        :options="supperSelectOptions"
      ></supper-select>
      <a-card size="small">
        <div style="float: left; width: 400px">
          <a-input-group v-show="activeKey === '1'" compact>
            <a-select style="width: 30%" v-model:value="inputValue">
              <a-select-option value="">全 部</a-select-option>
              <a-select-option value="call">接警内容</a-select-option>
              <a-select-option value="deal">反馈内容</a-select-option>
              <a-select-option value="caseNo">警情单号</a-select-option>
              <a-select-option value="callPhone">报警电话</a-select-option>
              <a-select-option value="callAddress">报警地址</a-select-option>
            </a-select>
            <a-input-search
              v-model:value="inputParams"
              style="width: 70%"
              @search="inputSearch"
              placeholder="请输入关键词"
            />
          </a-input-group>
        </div>
        <div style="float: right">
          <span style="width: 70px">报警时间：</span>
          <a-space direction="vertical" :locale="zhCN">
            <a-range-picker @change="pickerChange" v-model:value="valueTime" :format="dateFormat" />
          </a-space>
        </div>
      </a-card>
      <a-card size="small" style="margin-top: 20px">
        <a-tabs size="small" v-model:activeKey="activeKey" @change="tabChange">
          <a-tab-pane key="1" tab="警情列表">
            <police-list
              portionUrl="/security/detail/queryCaseList"
              :buttonList="btnList"
              @change="handleList"
              @ready="readyHandle"
              :params="ListParamsjq"
            ></police-list>
          </a-tab-pane>
          <a-tab-pane key="2" tab="分类统计">
            <a-card size="small" title="传统分类统计">
              <template #extra>
                统计类型：
                <a-select v-model:value="selectKey" @change="selectKeyChange">
                  <a-select-option value="0">接 警</a-select-option>
                  <a-select-option value="1">反 馈</a-select-option>
                </a-select>
              </template>
              <a-row type="flex">
                <a-col :span="10">
                  <pie
                    v-if="traditionClass != ''"
                    :data="traditionClass"
                    :height="300"
                    :fieldNames="{
                      name: 'name',
                      value: 'caseNum',
                    }"
                    @zrender:click="traditionClick"
                    title="传统分类涉警量"
                  />
                  <a-empty v-else />
                </a-col>
                <a-col :span="14">
                  <bar
                    v-if="traditionBar != ''"
                    :data="traditionBar"
                    type="传统"
                    :height="300"
                    :fieldNames="{
                      name: 'name',
                      value: 'caseNum',
                    }"
                    title="涉警量"
                    @zrender:click="ctchartClickHandle"
                  />
                  <a-empty v-else />
                </a-col>
              </a-row>
            </a-card>
            <a-card size="small">
              <template #title>
                <div>
                  <img
                    src="@/assets/image/statistics/ai.svg"
                    alt=""
                    style="height: 40px; position: absolute; left: -3px; top: -3px"
                  />
                  <span style="margin-left: 36px">智能分类统计</span>
                </div>
              </template>
              <a-row type="flex">
                <a-col :span="10">
                  <pie
                    v-if="intelligenceClass != ''"
                    :data="intelligenceClass"
                    :height="300"
                    :fieldNames="{
                      name: 'name',
                      value: 'caseNum',
                    }"
                    @zrender:click="intelligenceClick"
                    title="智能分类涉警量"
                  />
                  <a-empty v-else />
                </a-col>
                <a-col :span="14">
                  <bar
                    v-if="intelligenceBar != ''"
                    :data="intelligenceBar"
                    type="智能"
                    :height="300"
                    :fieldNames="{
                      name: 'name',
                      value: 'caseNum',
                    }"
                    title="涉警量"
                    @zrender:click="znchartClickHandle"
                  />
                  <a-empty v-else />
                </a-col>
              </a-row>
            </a-card>
          </a-tab-pane>
          <a-tab-pane key="3" tab="趋势视图">
            <div style="text-align: center">{{ securityName }}相关警情趋势统计</div>
            <timeline
              v-if="trendList != ''"
              :height="500"
              type="传统"
              :data="trendList"
              :legend="['当前警情', '去年同期']"
              :fieldNames="{ name: 'dataDate', values: ['caseNum', 'yoyCaseNum'] }"
              @zrender:click="timeChartClickHandle"
            />
            <a-empty v-else />
          </a-tab-pane>
          <a-tab-pane key="4" tab="地图模式">
            <div class="analysis-map">
              <ol-map
                ref="mapInstance"
                height="100%"
                @moveend="handleMoveend"
                @movestart="movestartHandle"
              >
                <my-map-html
                  v-for="(item, index) in mapList"
                  :key="index"
                  :visible="visibleHtml"
                  :position="item.coordinate"
                  :stopEvent="false"
                >
                  <div
                    class="cluster"
                    v-if="item.heapNum && item.heapNum > 1"
                    @click="handlepolymerization(item)"
                  >
                    {{ item.heapNum }}
                  </div>
                  <div
                    class="iconfont icon-weizhi marker"
                    v-else
                    @click="showDrawer(item.caseNo)"
                  ></div>
                </my-map-html>
              </ol-map>
            </div>
          </a-tab-pane>
          <a-tab-pane class="card" key="5" tab="时间轴模式">
            <div
              v-if="timeAxisList != ''"
              @scroll.passive="getScroll($event)"
              style="height: 950px; overflow: auto"
            >
              <a-timeline mode="alternate" style="width: 940px; margin: 20px auto">
                <a-timeline-item v-for="item in timeAxisList" :key="item.caseNo">
                  <a-card style="width: 450px; text-align: left">
                    <template #title>
                      <div class="decoration" @click="showDrawer(item.caseNo)">
                        <span>警情单号：</span>
                        <span v-html="item.caseNo"></span>
                        <span v-if="item.caseNo != '' && item.jcaseNo != ''">|</span>
                        <span v-html="item.jcaseNo"></span>
                      </div>
                    </template>
                    <template #extra></template>
                    <p>
                      报警内容:
                      <span v-html="item.caseDesc"></span>
                    </p>
                    <p>
                      出警情况:
                      <span v-html="item.dealDesc"></span>
                    </p>
                    <p style="color: #1890ff">
                      <clock-circle-outlined />
                      {{ item.callTime }}
                    </p>
                  </a-card>
                </a-timeline-item>
              </a-timeline>
            </div>
            <a-empty v-else />
          </a-tab-pane>
          <a-tab-pane key="6" tab="情报颗粒统计">
            <!-- <a-tabs
            type="card"
            v-model:activeKey="statisticsKey"
            @change="statisticsChange(statisticsKey)"
          >
            <a-tab-pane
              v-for="(item, index) in statisticsList"
              :key="index"
              :tab="item.name"
            ></a-tab-pane>
          </a-tabs> -->
            <a-row :gutter="20">
              <a-col :span="10">
                <div style="text-align: center">颗粒要素占比统计</div>
                <pie
                  v-if="statisticsPic.length"
                  :data="statisticsPic"
                  :height="400"
                  :fieldNames="{
                    name: 'name',
                    value: 'caseNum',
                  }"
                  title="要素总量"
                  @zrender:click="statisticsClick"
                />
                <a-empty style="margin-top: 50px" v-else />
              </a-col>
              <a-col :span="14">
                <div style="text-align: center">颗粒涉警量统计</div>
                <bar
                  v-if="statisticsBar != ''"
                  :data="statisticsBar"
                  :height="400"
                  type="传统"
                  :fieldNames="{
                    name: 'name',
                    value: 'caseNum',
                  }"
                  title="涉警量"
                  @zrender:click="chartClickHandle"
                />
                <a-empty style="margin-top: 50px" v-else />
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane key="7" tab="乱点整改监测">
            <a-row>
              <a-col :span="18">
                <div class="police-total">
                  共
                  <span class="police-total-num">{{ count }}</span>
                  个监测
                </div>
              </a-col>
              <a-col :span="3">
                <a-button @click="monitorShowDrawer" type="primary">设置监测规则</a-button>
              </a-col>
              <a-col :span="3">
                监测状态：
                <a-select v-model:value="selectValue" @change="processFlagChange">
                  <a-select-option value="">全 部</a-select-option>
                  <a-select-option value="0">未开始</a-select-option>
                  <a-select-option value="1">整改中</a-select-option>
                  <a-select-option value="2">已达标</a-select-option>
                  <a-select-option value="9">未达标</a-select-option>
                </a-select>
              </a-col>
            </a-row>
            <a-card
              size="small"
              v-for="monitoritem in monitorList"
              :key="monitoritem.id"
              :title="monitoritem.securityName"
              style="margin-top: 10px"
            >
              <template #extra>
                <a-row style="width: 150px" :gutter="20">
                  <a-col>
                    <a @click="showDrawer(monitoritem.id)">查看测试规则</a>
                  </a-col>
                  <a-col>
                    <div
                      :class="{
                        'background-image0': monitoritem.processFlag === '0',
                        'background-image1': monitoritem.processFlag === '1',
                        'background-image2': monitoritem.processFlag === '2',
                        'background-image9': monitoritem.processFlag === '9',
                      }"
                      class="monitor-image"
                    >
                      {{ processFlag(monitoritem.processFlag) }}
                    </div>
                  </a-col>
                </a-row>
              </template>
              <a-row>
                <a-col :span="4">
                  <a-descriptions size="small" layout="vertical">
                    <a-descriptions-item span="3" label="周期">
                      <span v-if="monitoritem.period">{{ monitoritem.period }}个月</span>
                    </a-descriptions-item>
                    <a-descriptions-item span="3" label="起始时间">
                      {{ monitoritem.monitorStartDate }}
                    </a-descriptions-item>
                    <a-descriptions-item span="3" label="整改目标">
                      下降到 {{ monitoritem.targetCaseNum }} (起)
                      <br />

                      同比下降 {{ monitoritem.declineNum }} (起)
                    </a-descriptions-item>
                    <a-descriptions-item span="3" label="反馈类别">全部</a-descriptions-item>
                    <a-descriptions-item span="3" label="智能分类">全部</a-descriptions-item>
                  </a-descriptions>
                </a-col>
                <a-col :span="20">
                  <mix-line-bar
                    :height="400"
                    :data="monitoritem.list"
                    :legend="['累计下降率', '警情数量']"
                    :fieldNames="{ name: 'dataDate', values: ['caseNum', 'yoyCaseNum'] }"
                  />
                </a-col>
              </a-row>
            </a-card>
          </a-tab-pane>
        </a-tabs>
        <!-- 弹出层详情 -->
        <a-drawer
          :title="drawerName"
          :destroyOnClose="destroyOnClose"
          :width="600"
          :visible="visible"
          @close="onClose"
          :body-style="{ paddingBottom: '80px' }"
        >
          <police-details
            v-if="activeKey === '5' || activeKey === '4'"
            :case-no="caseNoDetails"
          ></police-details>
          <div v-if="activeKey === '7'">
            <div v-if="monitorInfoList == '' || monitorInfoList == null"><a-empty /></div>
            <a-descriptions style="padding: 0 40px" size="small">
              <a-descriptions-item span="3" label="智能分类">全部</a-descriptions-item>
              <a-descriptions-item span="3" label="反馈类型">全部</a-descriptions-item>
              <a-descriptions-item span="3" label="辖区单位">全部</a-descriptions-item>
              <a-descriptions-item span="3" label="接警类型">全部</a-descriptions-item>
              <a-descriptions-item span="3" label="起始时间">
                {{ monitorInfoList.monitorStartDate }}
              </a-descriptions-item>
              <a-descriptions-item span="3" label="整改周期">
                <span v-if="monitorInfoList.period">{{ monitorInfoList.period }}个月</span>
              </a-descriptions-item>
              <a-descriptions-item span="3" label="同比总警情数">
                {{ monitorInfoList.caseNum }}
              </a-descriptions-item>
              <a-descriptions-item span="3" label="整改目标">
                <div>
                  下降到 {{ monitorInfoList.targetCaseNum }} (起)
                  <br />
                  即同比累计下降{{ targetPercent }}
                  <br />
                  <div v-for="(mon, monindex) in monitorInfoList.monthList" :key="monindex">
                    截至 {{ mon.dataDate }}：下降 {{ mon.targetPercent }}
                  </div>
                </div>
              </a-descriptions-item>
            </a-descriptions>
          </div>
        </a-drawer>
        <!-- 设置监测规则 -->
        <a-drawer
          :destroyOnClose="destroyOnClose"
          @close="monitorClose"
          title="设置监测规则"
          :width="720"
          :visible="monitorVisible"
        >
          <supper-select @change="supperSelectChange"></supper-select>
          <a-form :model="form" :rules="rules" layout="vertical" style="margin-top: 20px">
            <a-card style="height: 540px; overflow-y: auto">
              <a-form-item label="整改周期：" name="name">
                <a-row :gutter="16">
                  <a-col :span="12">
                    起始时间：
                    <a-date-picker
                      @change="rectificationCycleChange"
                      v-model:value="form.monitorStartDate"
                    />
                  </a-col>
                  <a-col :span="12">
                    周期：
                    <a-select
                      style="width: 100px"
                      @change="rectificationCycleChange"
                      v-model:value="form.period"
                      placeholder="请选择"
                    >
                      <a-select-option value="1">一个月</a-select-option>
                      <a-select-option value="2">二个月</a-select-option>
                      <a-select-option value="3">三个月</a-select-option>
                      <a-select-option value="4">四个月</a-select-option>
                      <a-select-option value="5">五个月</a-select-option>
                      <a-select-option value="6">六个月</a-select-option>
                      <a-select-option value="7">七个月</a-select-option>
                      <a-select-option value="8">八个月</a-select-option>
                      <a-select-option value="9">九个月</a-select-option>
                      <a-select-option value="10">十个月</a-select-option>
                      <a-select-option value="11">十一个月</a-select-option>
                      <a-select-option value="12">一年</a-select-option>
                    </a-select>
                  </a-col>
                </a-row>
                <br />
                <a-row :gutter="16">
                  <a-col :span="8">同比总警情数：{{ form.yoyCaseNum }}</a-col>
                  <a-col :span="8">环比总警情数： {{ form.ChainCaseNum }}</a-col>
                </a-row>
              </a-form-item>
              <a-form-item label="整改目标：" name="name">
                下降到
                <a-input
                  v-model:value="form.targetCaseNum"
                  style="width: 100px"
                  placeholder="请输入内容"
                  @input="targetInput"
                />
                起
              </a-form-item>
              <div>
                <a-radio-group v-model:value="form.monitorType" @change="targetInput">
                  <a-radio value="0">同比</a-radio>
                  <a-radio value="1">环比</a-radio>
                </a-radio-group>
              </div>
              <br />
              <div v-if="tarList != ''">
                下降到
                <a-input
                  v-model:value="monthTargets"
                  style="width: 100px; margin-bottom: 10px"
                  @input="targetInput"
                  disabled="ture"
                />
                %
                <div v-for="tarItem in tarList">
                  截至 {{ tarItem.monthDates }}： 下降 {{ tarItem.monthTargets }} %
                </div>
              </div>
              <br />
              说明：同比总警情数和环比总警情数都为0不可设置监测规则
            </a-card>
          </a-form>
          <div class="close">
            <a-button style="margin-right: 8px" @click="monitorClose">取消</a-button>
            <a-button type="primary" @click="addClick">确定</a-button>
          </div>
        </a-drawer>

        <!-- 警情列表 -->
        <police-list-drawer
          v-model:visible="tabVisible"
          :title="titleData"
          :tabs="policeTabs"
        ></police-list-drawer>
      </a-card>
    </a-spin>
  </page-container>
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  reactive,
  createVNode,
  watchEffect,
  onMounted,
  nextTick,
  onActivated,
} from 'vue';
import bar from '@/components/charts/bar/index.vue';
import Pie from '@/components/charts/pie/active-pie/index.vue';
import Timeline from '@/components/charts/line/index.vue';
import MixLineBar from '../jurisdiction-details/components/mix-line-bar.vue';
import SupperSelect from '@/components/supper-select/index.vue';
import PoliceDetails from '@/components/police-details/index.vue';
import PoliceList from '@/components/police-list/index.vue';
import PoliceListDrawer from '@/components/police-list-drawer/index.vue';
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import { exportExcelLD } from '@/api/intelligentanalysis/alert';
import { Modal, message } from 'ant-design-vue';
import { downloadExcel } from '@/utils/download';
import moment, { Moment } from 'moment';
import 'moment/dist/locale/zh-cn';
import {
  ClockCircleOutlined,
  HeartFilled,
  ExclamationCircleOutlined,
  HeartOutlined,
} from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';
import {
  getQueryCaseTrend,
  getQueryTimeLine,
  getQueryMultiStat,
  getQueryFeaturePieBar,
  getQueryMonitorList,
  getQueryMonitorInfo,
  getQueryYoyChain,
  getAdd,
} from '@/api/district-monitoring/jurisdiction-list/jurisdiction-details/police-list';
import { queryCenterPoint } from '@/api/index';
import { getOperate } from '@/api/district-monitoring/jurisdiction-list/list';
import { getParamsCodes } from '@/components/supper-select/index.js';
import {
  policeInformationItem,
  dataItem,
  statisticsItem,
  Classified,
  //   ProportionSalesItem,
  ClassifiedChildren,
} from '../typing';
import olMap from '@/components/openlayers/index.vue';
import MyMapHtml from '@/components/openlayers/packages/my-map-html';
import { queryCaseAgg } from '@/api/intelligentanalysis/map';

interface form {
  monitorStartDate: string | undefined;
  period: string | undefined;
  targetCaseNum: string;
  monitorType: string;
  yoyCaseNum: string; //同比
  ChainCaseNum: string; //环比
}

export default defineComponent({
  setup() {
    const router = useRouter();
    const securityNo = router.currentRoute.value.query.securityNo;
    const securityName = router.currentRoute.value.query.securityName;
    const concernStatus = ref<any>(router.currentRoute.value.query.concernStatus);
    const searchName = ref<any>(router.currentRoute.value.query.name);
    const classifyType = ref<any>(router.currentRoute.value.query.classifyType);
    const classifyCodes = JSON.parse(searchName.value).ai;
    const callSummaryCodes = JSON.parse(searchName.value).jq;
    const dealSummaryCodes = JSON.parse(searchName.value).fk;
    const xqdwCodes = JSON.parse(searchName.value).xqdw;
    const securityCaseNum = router.currentRoute.value.query.securityCaseNum;
    const callTimeStart = ref<any>(router.currentRoute.value.query.callTimeStart);
    const callTimeEnd = ref<any>(router.currentRoute.value.query.callTimeEnd);
    const inputParams = ref<any>(router.currentRoute.value.query.inputParams);
    const activeKey = ref<any>('1');

    const ListParams = reactive({
      classifyType: classifyType.value,
      securityNo: securityNo,
      callTimeStart: callTimeStart.value,
      callTimeEnd: callTimeEnd.value,
      inputType: '',
      inputParams: '',
      xqdwCodes: xqdwCodes == null ? xqdwCodes : xqdwCodes.toString(),
      classifyCodes: classifyCodes == null ? classifyCodes : classifyCodes.toString(),
      callSummaryCodes: callSummaryCodes == null ? callSummaryCodes : callSummaryCodes.toString(),
      dealSummaryCodes: dealSummaryCodes == null ? dealSummaryCodes : dealSummaryCodes.toString(),
      featureCode: '',
      subdivisionFlag: 'Y',
      trafficFlag: 'N',
      otherFlag: 'N',
      page: 1,
      size: 10,
    });
    const ListParamsjq = reactive({
      classifyType: classifyType.value,
      securityNo: securityNo,
      callTimeStart: callTimeStart.value,
      callTimeEnd: callTimeEnd.value,
      inputType: '',
      inputParams: inputParams.value,
      xqdwCodes: xqdwCodes == null ? xqdwCodes : xqdwCodes.toString(),
      classifyCodes: classifyCodes == null ? classifyCodes : classifyCodes.toString(),
      callSummaryCodes: callSummaryCodes == null ? callSummaryCodes : callSummaryCodes.toString(),
      dealSummaryCodes: dealSummaryCodes == null ? dealSummaryCodes : dealSummaryCodes.toString(),
      featureCode: '',
      subdivisionFlag: 'Y',
      trafficFlag: 'N',
      otherFlag: 'N',
      page: 1,
      size: 10,
    });
    const policeListParams = [
      {
        name: '',
        url: '/security/detail/queryCaseList',
        params: reactive({
          classifyType: classifyType.value,
          securityNo: securityNo,
          callTimeStart: callTimeStart.value,
          callTimeEnd: callTimeEnd.value,
          inputParams: '',
          element: '',
          featureValue: '',
          xqdwCodes: '',
          classifyCodes: '',
          callSummaryCodes: '',
          dealSummaryCodes: '',
          subdivisionFlag: 'Y',
          trafficFlag: 'N',
          otherFlag: 'N',
          page: 1,
          size: 50,
        }),
      },
    ];
    let queryForm = reactive({
      callTimeStart: callTimeStart.value,
      callTimeEnd: callTimeEnd.value,
      inputParams: '',
      securityNo,
      xqdwCodes: xqdwCodes == null ? xqdwCodes : xqdwCodes.toString(),
      classifyCodes: classifyCodes == null ? classifyCodes : classifyCodes.toString(),
      callSummaryCodes: callSummaryCodes == null ? callSummaryCodes : callSummaryCodes.toString(),
      dealSummaryCodes: dealSummaryCodes == null ? dealSummaryCodes : dealSummaryCodes.toString(),
      caseNos: '',
      classifyType: '',
      maxLatitude: '',
      maxLongitude: '',
      minLatitude: '',
      minLongitude: '',
      mapLayer: '12',
      page: '1',
      underLayer: 0,
    });

    const supperSelectOptions = [
      {
        type: 'ai',
        checkedKeys: classifyCodes != null ? classifyCodes : '',
      },
      {
        type: 'jq',
        checkedKeys: callSummaryCodes != null ? callSummaryCodes : '',
      },
      {
        type: 'fk',
        checkedKeys: dealSummaryCodes != null ? dealSummaryCodes : '',
      },
      {
        type: 'xqdw',
        checkedKeys: xqdwCodes != null ? xqdwCodes : '',
      },
    ];

    const rules = { name: [{ required: true }] };
    const visible = ref<boolean>(false);
    const tabVisible = ref<boolean>(false);
    const monitorVisible = ref<boolean>(false);
    const destroyOnClose = ref<boolean>(true);
    const selectKey = ref<string>('1');
    const statisticsKey = ref<number>(0);
    const count = ref<number>(0);
    const caseNoDetails = ref<string>('');
    const classifyName = ref<string>('');
    const inputValue = ref<string>('');
    const selectValue = ref<string>('');
    const policeTabs = ref<Array<any>>([]);
    const dateFormat = 'YYYY-MM-DD HH:mm:ss';
    const titleData = ref<string>('');
    const targetPercent = ref<string>('');
    const drawerName = ref<string>('');
    const spinning = ref<boolean>(false);
    const valueTime = ref<Moment[]>([
      moment(callTimeStart.value, dateFormat),
      moment(callTimeEnd.value, dateFormat),
    ]);

    const total = ref<number>(0);
    const caseNos = ref<any>([]);
    const handleList = value => {
      caseNos.value = value.toString();
    };
    const readyHandle = val => {
      total.value = val;
    };
    //导出
    const exportHandle = () => {
      if (total.value)
        if (caseNos.value.length) {
          let obj = Object.assign({ caseNos: caseNos.value });
          exportFile(obj);
        } else {
          Modal.confirm({
            title: '提示',
            icon: createVNode(ExclamationCircleOutlined),
            content: '是否导出全部数据？',
            okText: '确认',
            cancelText: '取消',
            onOk() {
              let obj = ref<any>(ListParamsjq);
              obj.value.page = 0;
              obj.value.size = 0;
              exportFile(obj.value);
            },
          });
        }
    };
    const btnList = ref([
      {
        type: '',
        name: '导出',
        clickHandle: exportHandle,
        loading: false,
        disabled: false,
      },
    ]);
    const exportFile = params => {
      btnList.value[0].loading = true;
      exportExcelLD(params)
        .then(res => {
          downloadExcel(res, '警情列表');
        })
        .finally(() => {
          btnList.value[0].loading = false;
        });
    };
    watchEffect(() => {
      btnList.value[0].disabled = total.value === 0;
    });

    //时间轴
    const timeAxisList = ref<Array<policeInformationItem>>([]);
    const timeCount = ref<any>();
    const getTime = async () => {
      const res = await getQueryTimeLine(ListParams);
      spinning.value = false;
      if (res.code === 200) {
        timeCount.value = res.data.count;
        timeAxisList.value = res.data.details;
        timeAxisList.value.concat(res.data.details);
      }
    };

    //乱点整改监测
    const MonitorParams = reactive({
      page: 1,
      size: 10,
      securityNo: securityNo,
      inputParams: '',
      processFlag: '',
    });
    const monitorList = ref<any>([]);
    const getMonitor = async () => {
      const res = await getQueryMonitorList(MonitorParams);
      spinning.value = false;
      if (res.code === 200) {
        monitorList.value = res.data.details;
        count.value = res.data.count;
      }
    };
    //查看监测规则
    const monitorInfoList = ref<any>({});
    const getMonitorInfo = async () => {
      const res = await getQueryMonitorInfo({ monitorNo: caseNoDetails.value });
      if (res.code === 200 && res.data != null) {
        monitorInfoList.value = res.data[0];
        targetPercent.value = res.data[0].monthList.slice(-1)[0].targetPercent;
      }
    };

    //情报颗粒统计
    const statisticsList = ref<Array<statisticsItem>>([]);
    const statisticsPic = ref<Array<any>>([]);
    const statisticsBar = ref<Array<statisticsItem>>([]);
    const statisticsName = ref();
    const getFeaturePieBar = async () => {
      const res = await getQueryFeaturePieBar(ListParams);
      spinning.value = false;
      if (res.code === 200) {
        statisticsList.value = res.data;
        if (res.data != '') {
          statisticsPic.value = res.data.firstList;
          statisticsBar.value = res.data.dataList;
          //   statisticsName.value = res.data[0].name;
        } else {
          statisticsPic.value = [];
          statisticsBar.value = [];
          //   statisticsName.value = '';
        }
      }
    };
    // const statisticsChange = statisticsKey => {
    //   statisticsName.value = statisticsList.value[statisticsKey].name;
    //   statisticsPic.value = statisticsList.value[statisticsKey].children;
    //   statisticsBar.value = statisticsList.value[statisticsKey].children[0].children;
    // };

    //颗粒要素占比统计
    // const proportionSalesList = ref<Array<ProportionSalesItem>>([]);
    // proportionSalesList.value = statistics.RESULT[0].children;

    //趋势视图
    const trendList = ref<Array<dataItem>>([]);
    const getTrend = async () => {
      const res = await getQueryCaseTrend(ListParams);
      spinning.value = false;
      if (res.code === 200 && res.data != null) {
        trendList.value = res.data.dayList;
      } else {
        trendList.value = [];
      }
    };

    //分类统计
    const intelligenceClass = ref<Array<Classified>>(); //智能分类统计数据
    const traditionClass = ref<Array<Classified>>(); //传统分类统计数据
    const classifiedStatistic = ref(); //分类总数据
    const intelligenceBar = ref<Array<ClassifiedChildren>>(); //智能柱状图数据
    const traditionBar = ref<Array<ClassifiedChildren>>(); //传统柱状图数据

    const getMultiStat = async () => {
      const res = await getQueryMultiStat(ListParams);
      spinning.value = false;
      if (res.code === 200) {
        classifiedStatistic.value = res.data;
        intelligenceClass.value = res.data.classifyPieBar.firstList;
        intelligenceBar.value = res.data.classifyPieBar.defaultBarList;
        traditionClass.value = res.data.dealPieBar.firstList;
        traditionBar.value = res.data.dealPieBar.defaultBarList;
      }
    };

    //切换统计类型 报警 0<=>反馈 1
    const selectKeyChange = async () => {
      if (selectKey.value == '1') {
        traditionClass.value = classifiedStatistic.value.dealPieBar.firstList;
        traditionBar.value = classifiedStatistic.value.dealPieBar.defaultBarList;
      } else {
        traditionClass.value = classifiedStatistic.value.callPieBar.firstList;
        traditionBar.value = classifiedStatistic.value.callPieBar.defaultBarList;
      }
    };

    //传统点击事件
    const traditionClick = (e: any, state: boolean) => {
      if (e.target) {
        const { dataIndex } = e.target;
        if (state) {
          if (selectKey.value == '1') {
            traditionBar.value = classifiedStatistic.value.dealPieBar.firstList[dataIndex].children;
          } else {
            traditionBar.value = classifiedStatistic.value.callPieBar.firstList[dataIndex].children;
          }
        } else {
          selectKeyChange();
        }
      } else {
        selectKeyChange();
      }
    };

    //智能点击事件
    const intelligenceClick = (e: any, state: boolean) => {
      if (e.target) {
        const { dataIndex } = e.target;
        if (state) {
          intelligenceBar.value =
            classifiedStatistic.value.classifyPieBar.firstList[dataIndex].children;
        } else {
          intelligenceBar.value = classifiedStatistic.value.classifyPieBar.defaultBarList;
        }
      } else {
        intelligenceBar.value = classifiedStatistic.value.classifyPieBar.defaultBarList;
      }
    };

    //情报颗粒点击事件
    const statisticsClick = async (e: any, state: boolean) => {
      if (e.target) {
        const { dataIndex } = e.target;
        if (state) {
          ListParams.featureCode = statisticsPic.value[dataIndex].code;
        } else {
          ListParams.featureCode = '';
        }
      } else {
        ListParams.featureCode = '';
      }
      const res = await getQueryFeaturePieBar(ListParams);
      if (res.code === 200) {
        statisticsList.value = res.data;
        if (res.data != '') {
          statisticsBar.value = res.data.dataList;
        } else {
          statisticsBar.value = [];
        }
      }
    };

    const tabChange = () => {
      titleData.value = '';
      spinning.value = true;
      if (activeKey.value == '1') {
        spinning.value = false;
      } else if (activeKey.value == '2') {
        getMultiStat();
      } else if (activeKey.value == '3') {
        getTrend();
      } else if (activeKey.value == '4') {
        drawerName.value = '警情详情';
      } else if (activeKey.value == '5') {
        drawerName.value = '警情详情';
        getTime();
      } else if (activeKey.value == '6') {
        getFeaturePieBar();
      } else if (activeKey.value == '7') {
        drawerName.value = '整改监测规则';
        getMonitor();
      }
    };

    const showDrawer = (caseNo: string) => {
      caseNoDetails.value = caseNo;
      if (activeKey.value == '7') {
        getMonitorInfo();
      }
      visible.value = true;
    };
    const monitorShowDrawer = () => {
      monitorVisible.value = true;
    };

    const onClose = () => {
      visible.value = false;
    };

    const supperSelectChange = data => {
      const { ai, jq, fk, xqdw } = getParamsCodes(data);
      ListParams.xqdwCodes = xqdw;
      ListParams.classifyCodes = ai;
      ListParams.callSummaryCodes = jq;
      ListParams.dealSummaryCodes = fk;
      ListParamsjq.xqdwCodes = xqdw;
      ListParamsjq.classifyCodes = ai;
      ListParamsjq.callSummaryCodes = jq;
      ListParamsjq.dealSummaryCodes = fk;
      queryForm.xqdwCodes = xqdw;
      queryForm.classifyCodes = ai;
      queryForm.callSummaryCodes = jq;
      queryForm.dealSummaryCodes = fk;
      tabChange();
    };

    //传统柱状图点击事件
    const ctchartClickHandle = (index, item) => {
      const params = {
        classifyType: classifyType.value,
        securityNo: securityNo,
        callTimeStart: callTimeStart.value,
        callTimeEnd: callTimeEnd.value,
        inputParams: '',
        element: '',
        featureValue: '',
        xqdwCodes: ListParams.xqdwCodes,
        classifyCodes: ListParams.classifyCodes,
        callSummaryCodes: ListParams.callSummaryCodes,
        dealSummaryCodes: ListParams.dealSummaryCodes,
        callSummaryCode: '',
        dealSummaryCode: '',
        subdivisionFlag: 'Y',
        trafficFlag: 'N',
        otherFlag: 'N',
        page: 1,
        size: 50,
      };
      if (selectKey.value == '0') {
        // 接警
        params.callSummaryCode = item.code;
      } else if (selectKey.value == '1') {
        // 反馈
        params.dealSummaryCode = item.code;
      }
      policeTabs.value = [
        {
          name: '',
          url: '/security/detail/queryCaseList',
          params: reactive(params),
        },
      ];
      tabVisible.value = true;
    };

    //智能柱状图点击事件
    const znchartClickHandle = (index, item) => {
      policeListParams[0].params.featureValue = '';
      policeListParams[0].params.xqdwCodes = ListParams.xqdwCodes;
      policeListParams[0].params.classifyCodes = item.code;
      policeListParams[0].params.callSummaryCodes = ListParams.callSummaryCodes;
      policeListParams[0].params.dealSummaryCodes = ListParams.dealSummaryCodes;
      policeListParams[0].params.element = '';
      policeTabs.value = policeListParams;
      tabVisible.value = true;
    };

    //颗粒涉警量统计
    const chartClickHandle = (index, item) => {
      policeListParams[0].params.callSummaryCodes = '';
      policeListParams[0].params.dealSummaryCodes = '';
      policeListParams[0].params.classifyCodes = '';
      policeListParams[0].params.featureValue = item.name;
      policeListParams[0].params.element = item.name;
      policeTabs.value = policeListParams;
      tabVisible.value = true;
    };

    const lineParams = [
      {
        name: '当期警情',
        url: '/security/detail/queryCaseList',
        params: reactive({
          classifyType: classifyType.value,
          securityNo: securityNo,
          callTimeStart: callTimeStart.value,
          callTimeEnd: callTimeEnd.value,
          inputParams: '',
          xqdwCodes: '',
          classifyCodes: '',
          callSummaryCodes: '',
          dealSummaryCodes: '',
          subdivisionFlag: 'Y',
          trafficFlag: 'N',
          otherFlag: 'N',
          page: 1,
          size: 10,
        }),
      },
      {
        name: '去年同期',
        url: '/security/detail/queryCaseList',
        params: reactive({
          classifyType: classifyType.value,
          securityNo: securityNo,
          callTimeStart: callTimeStart.value,
          callTimeEnd: callTimeEnd.value,
          inputParams: '',
          xqdwCodes: '',
          classifyCodes: '',
          callSummaryCodes: '',
          dealSummaryCodes: '',
          subdivisionFlag: 'Y',
          trafficFlag: 'N',
          otherFlag: 'N',
          page: 1,
          size: 10,
        }),
      },
    ];
    //折线图点击事件
    const timeChartClickHandle = (index, item) => {
      const dataStart = `${item.dataDate} 00:00:00`;
      const dataEnd = `${item.dataDate} 23:59:59`;
      titleData.value = item.dataDate;
      lineParams[0].params.callTimeStart = dataStart;
      lineParams[0].params.callTimeEnd = dataEnd;
      lineParams[1].params.callTimeStart = moment(dataStart).subtract(1, 'year').format(dateFormat);
      lineParams[1].params.callTimeEnd = moment(dataEnd).subtract(1, 'year').format(dateFormat);

      lineParams[0].params.xqdwCodes = ListParams.xqdwCodes;
      lineParams[0].params.classifyCodes = ListParams.classifyCodes;
      lineParams[0].params.callSummaryCodes = ListParams.callSummaryCodes;
      lineParams[0].params.dealSummaryCodes = ListParams.dealSummaryCodes;
      lineParams[1].params.xqdwCodes = ListParams.xqdwCodes;
      lineParams[1].params.classifyCodes = ListParams.classifyCodes;
      lineParams[1].params.callSummaryCodes = ListParams.callSummaryCodes;
      lineParams[1].params.dealSummaryCodes = ListParams.dealSummaryCodes;

      policeTabs.value = lineParams;
      tabVisible.value = true;
    };

    //搜索框
    const inputSearch = (searchValue: string) => {
      ListParamsjq.inputType = inputValue.value;
      ListParamsjq.inputParams = searchValue;
    };

    //时间选择器
    const pickerChange = (val: Moment[]) => {
      ListParams.callTimeStart = val[0] ? val[0].format(dateFormat) : '';
      ListParams.callTimeEnd = val[1] ? val[1].format(dateFormat) : '';
      ListParamsjq.callTimeStart = val[0] ? val[0].format(dateFormat) : '';
      ListParamsjq.callTimeEnd = val[1] ? val[1].format(dateFormat) : '';
      tabChange();
    };

    //监测状态
    const processFlag = processFlag => {
      if (processFlag === '0') {
        return '未开始';
      } else if (processFlag === '1') {
        return '整改中';
      } else if (processFlag === '2') {
        return '已达标';
      } else if (processFlag === '9') {
        return '未达标';
      }
    };
    //监测状态改变方法
    const processFlagChange = () => {
      MonitorParams.processFlag = selectValue.value;
      getMonitor();
    };
    const form: form = reactive({
      monitorStartDate: undefined,
      period: undefined,
      targetCaseNum: '',
      monitorType: '0',
      yoyCaseNum: '0', //同比
      ChainCaseNum: '0', //环比
    });
    //设置监测规则 整改周期变化
    const rectificationCycleChange = async () => {
      const YoyChain = reactive({
        classifyCodes: '',
        dealSummaryCodes: '',
        callSummaryCodes: '',
        xqdwCodes: '',
        monitorStartDate: moment(form.monitorStartDate).format('YYYY-MM-DD') + ' 00:00:00',
        period: form.period,
        securityNo: securityNo,
      });

      if (form.period && form.monitorStartDate) {
        const res = await getQueryYoyChain(YoyChain);
        if (res.code === 200) {
          form.yoyCaseNum = res.data.yoyCaseNum;
          form.ChainCaseNum = res.data.ChainCaseNum;
        }
      }
    };
    //整改目标
    const tarNum = ref<number>();
    const tarList = ref<any>([]);
    const monthTargets = ref<number>();
    const caseNum = ref<any>();
    const targetInput = () => {
      if (form.period && form.monitorStartDate) {
        tarList.value = [];
        if (form.monitorType === '0') {
          caseNum.value = form.yoyCaseNum;
          //同比
          tarNum.value =
            (parseInt(caseNum.value) - parseInt(form.targetCaseNum)) /
            (parseInt(caseNum.value) * parseInt(form.period));
        } else if (form.monitorType === '1') {
          caseNum.value = form.ChainCaseNum;
          //环比
          tarNum.value =
            (parseInt(caseNum.value) - parseInt(form.targetCaseNum)) /
            (parseInt(caseNum.value) * parseInt(form.period));
        }

        if (parseInt(caseNum.value) > 0 && tarNum.value) {
          let monthDates = 30;
          for (let index = 0; index < parseInt(form.period); index++) {
            tarList.value.push({
              monthTargets: (tarNum.value * (index + 1) * 100).toFixed(2),
              monthDates: moment(form.monitorStartDate)
                .add(monthDates, 'days')
                .format('YYYY-MM-DD'),
            });
            monthDates += 30;
          }
          monthTargets.value = tarList.value.slice(-1)[0].monthTargets;
        } else {
          tarList.value = [];
        }
      }
    };

    //取消
    const monitorClose = () => {
      form.monitorStartDate = undefined;
      form.period = undefined;
      form.targetCaseNum = '';
      form.monitorType = '0';
      form.yoyCaseNum = '';
      form.ChainCaseNum = '';
      form.ChainCaseNum = '';
      tarList.value = [];
      monitorVisible.value = false;
    };
    //确定
    const addClick = async () => {
      const monthTargets = ref<any>([]);
      const monthDates = ref<any>([]);
      tarList.value.forEach(item => {
        monthTargets.value.push(item.monthTargets);
        monthDates.value.push(item.monthDates);
      });
      const AddParams = reactive({
        securityNo: securityNo,
        classifyCodes: '',
        dealSummaryCodes: '',
        callSummaryCodes: '',
        xqdwCodes: '',
        monitorStartDate: moment(form.monitorStartDate).format('YYYY-MM-DD') + ' 00:00:00',
        period: form.period,
        targetCaseNum: form.targetCaseNum,
        monitorType: form.monitorType,
        monthDates: monthDates.value.toString(),
        monthTargets: monthTargets.value.toString(),
      });
      const res = await getAdd(AddParams);
      if (res.code === 200) {
        message.success('添加成功');
      }
      monitorClose();
    };

    onMounted(() => {
      activeKey.value = router.currentRoute.value.query.activeKey;
      getMultiStat();
      if (activeKey.value === '7') {
        getMonitor();
      }
    });

    //关注
    const attentionClick = async () => {
      if (concernStatus.value == '0') {
        const ListConcernParams = reactive({
          securityNo: securityNo,
          securityName: securityName,
          remark: '',
          concernStatus: '1',
        });
        const res = await getOperate(ListConcernParams);
        if (res.code === 200) {
          concernStatus.value = '1';
        }
      } else {
        showConfirm();
      }
    };
    //取消关注
    const showConfirm = () => {
      Modal.confirm({
        title: '确定取消关注吗？',
        icon: createVNode(ExclamationCircleOutlined),
        content: '取消关注，该乱点将会丢失！',
        onOk() {
          const ListConcernParams = reactive({
            securityNo: securityNo,
            securityName: securityName,
            remark: '',
            concernStatus: '0',
          });
          getOperate(ListConcernParams).then(res => {
            if (res.code === 200) {
              concernStatus.value = '0';
            }
          });
        },
        class: 'test',
      });
    };

    //地图
    const paramsMap = [
      {
        name: '',
        url: '/map/queryCaseList',
        params: reactive({
          callTimeStart: callTimeStart.value,
          callTimeEnd: callTimeEnd.value,
          page: '1',
          size: '50',
          caseNos: '',
        }),
      },
    ];
    onActivated(() => {});
    const centerPoint = ref<Array<number>>([]);
    const getCenterPoint = () => {
      queryCenterPoint(queryForm)
        .then(res => {
          centerPoint.value = [res.data.longitude, res.data.latitude];
          mapInstance.value.setCenter(centerPoint.value);
          numberOfVisits.value++;
        })
        .catch(err => {
          console.log('获取中心点err=', err);
        })
        .finally(() => {
          spinning.value = false;
        });
    };

    //经纬度集合
    const mapList = ref<any>([]);
    const visibleHtml = ref(false);
    const handleMoveend = e => {
      let extent = e.frameState.extent;
      queryForm.minLongitude = extent[0];
      queryForm.minLatitude = extent[1];
      queryForm.maxLongitude = extent[2];
      queryForm.maxLatitude = extent[3];
      queryForm.mapLayer = e.frameState.viewState.zoom;

      if (numberOfVisits.value === 0) {
        getCenterPoint();
      } else if (numberOfVisits.value > 0) {
        getMapData();
      }
    };
    const mapInstance = ref();
    const numberOfVisits = ref(0);

    //获取经纬度
    const getMapData = () => {
      queryCaseAgg(queryForm)
        .then(res => {
          const list: Array<any> = [];
          res.data.details.forEach(item => {
            const coordinate = [
              item.latitude || item.avgLongitude,
              item.latitude || item.avgLatitude,
            ];
            list.push({
              coordinate,
              heapNum: item.heapNum,
              caseNo: item.caseNo,
            });
          });
          mapList.value = list.slice(0, 999);
          nextTick(() => {
            visibleHtml.value = true;
          });
        })
        .catch(err => {
          console.log('获取经纬度err=', err);
        })
        .finally(() => {
          spinning.value = false;
        });
    };

    //地图警情详情
    const handlepolymerization = item => {
      paramsMap[0].params.caseNos = item.caseNo;
      policeTabs.value = paramsMap;
      tabVisible.value = true;
    };
    const movestartHandle = () => {
      visibleHtml.value = false;
    };

    const getScroll = async event => {
      if (event.target.scrollTop >= event.target.scrollHeight - event.target.clientHeight) {
        spinning.value = true;
        const TimeParams = reactive({
          classifyType: classifyType.value,
          securityNo: securityNo,
          callTimeStart: callTimeStart.value,
          callTimeEnd: callTimeEnd.value,
          inputType: '',
          inputParams: '',
          xqdwCodes: xqdwCodes == null ? xqdwCodes : xqdwCodes.toString(),
          classifyCodes: classifyCodes == null ? classifyCodes : classifyCodes.toString(),
          callSummaryCodes:
            callSummaryCodes == null ? callSummaryCodes : callSummaryCodes.toString(),
          dealSummaryCodes:
            dealSummaryCodes == null ? dealSummaryCodes : dealSummaryCodes.toString(),
          subdivisionFlag: 'Y',
          trafficFlag: 'N',
          otherFlag: 'N',
          page: 1,
          size: 10,
        });
        TimeParams.page += 1;
        const res = await getQueryTimeLine(TimeParams);
        spinning.value = false;
        if (res.code === 200) {
          timeCount.value = res.data.count;
          timeAxisList.value = timeAxisList.value.concat(res.data.details);
        }
      }
    };

    return {
      zhCN,
      form,
      visible,
      showDrawer,
      monitorShowDrawer,
      onClose,
      rules,
      monitorClose,
      trendList,
      tarList,
      timeAxisList,
      statisticsList,
      classifyName,
      statisticsName,
      tabVisible,
      monitorVisible,
      policeListParams,
      securityName,
      caseNoDetails,
      tabChange,
      getTrend,
      getTime,
      getFeaturePieBar,
      ListParamsjq,
      destroyOnClose,
      intelligenceClass,
      intelligenceBar,
      traditionBar,
      classifiedStatistic,
      getMultiStat,
      traditionClass,
      selectKeyChange,
      //   statisticsChange,
      statisticsPic,
      statisticsBar,
      selectKey,
      traditionClick,
      intelligenceClick,
      statisticsClick,
      supperSelectChange,
      ctchartClickHandle,
      znchartClickHandle,
      chartClickHandle,
      statisticsKey,
      timeChartClickHandle,
      securityNo,
      concernStatus,
      securityCaseNum,
      inputSearch,
      inputValue,
      selectValue,
      valueTime,
      moment,
      dateFormat,
      pickerChange,
      activeKey,
      policeTabs,
      btnList,
      exportFile,
      handleList,
      readyHandle,
      caseNos,
      titleData,
      drawerName,
      getMonitor,
      monitorList,
      monitorInfoList,
      getMonitorInfo,
      targetPercent,
      processFlag,
      processFlagChange,
      rectificationCycleChange,
      targetInput,
      count,
      attentionClick,
      addClick,
      monthTargets,
      getScroll,
      spinning,
      supperSelectOptions,
      classifyType,
      inputParams,
      //地图
      mapList,
      visibleHtml,
      handleMoveend,
      movestartHandle,
      handlepolymerization,
      mapInstance,
    };
  },
  components: {
    Pie,
    bar,
    olMap,
    MyMapHtml,
    MixLineBar,
    HeartFilled,
    HeartOutlined,
    Timeline,
    PoliceList,
    ClockCircleOutlined,
    PoliceDetails,
    SupperSelect,
    PoliceListDrawer,
  },
});
</script>
<style lang="less" scoped>
.rightTest {
  width: 150px;
  height: 200px;
  padding-top: 60px;
  text-align: center;
  border-left: 1px solid #ccc;
}
.police-total {
  padding: 10px;
  font-size: 16px;
  .police-total-num {
    padding-right: 5px;
    padding-left: 5px;
    color: #138fde;
    font-weight: 700;
  }
}
.monitor-image {
  position: absolute;
  top: -8px;
  width: 34px;
  height: 64px;
  padding-top: 1px;
  padding-left: 10px;
  color: #fff;
  font-size: 14px;
  line-height: 18px;
}
.background-image0 {
  background-image: url(~@/assets/wks.png);
}
.background-image1 {
  background-image: url(~@/assets/zgz.png);
}
.background-image2 {
  background-image: url(~@/assets/ydb.png);
}
.background-image9 {
  background-image: url(~@/assets/wdb.png);
}
.close {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  padding: 20px 16px;
  text-align: right;
}
:deep(.highlight) {
  color: red;
}

.icon-weizhi:before {
  color: #409eff;
  font-size: 20px;
  content: '\e640';
}
.analysis-map {
  height: 100%;
  .cluster {
    width: 32px;
    height: 32px;
    color: #fff;
    line-height: 32px;
    text-align: center;
    background: rgba(#1b81e0, 0.85);
    border-radius: 50%;
    cursor: pointer;
    &:hover {
      background: rgba(#1b81e0, 0.95);
    }
    &:active {
      background: rgba(#eb8924, 0.95);
    }
  }
  .marker {
    cursor: pointer;
    &::before {
      color: rgba(#1b81e0);
      font-size: 24px;
    }
    &:hover {
      &::before {
        color: rgba(#1b81e0, 0.85);
      }
    }
    &:active {
      &::before {
        color: rgba(#eb8924, 0.95);
      }
    }
  }
}
:deep(.decoration) {
  cursor: pointer;
}
:deep(.decoration):hover {
  text-decoration: underline;
}
:deep(.card .ant-card-head) {
  background: #4d649a;
}
</style>
